<template>
  <view>
    <view class="fool u-skeleton">
      <view class="fool-img u-skeleton-fillet ">
        <image :src="detail.menuImage.path"></image>
      </view>
      <view class="fool-detail u-skeleton-fillet">
        <view class="fool-target">
          <view class="item">
            <view class="number">{{detail.weightLoss}}</view>
            <view class="text">减重(斤)</view>
          </view>
          <view class="item">
            <view class="number">{{detail.cycle}}</view>
            <view class="text">食谱周期(天)</view>
          </view>
        </view>
        <view class="fool-info ">
          <view style="font-size: 35rpx;font-weight: 500;margin-bottom: 30rpx;color: #000;">食谱简介</view>
          <view class="fool-feature u-skeleton-fillet">
            <view class="featrue-text">
              {{detail.intro}}
            </view>
          </view>
        </view>
        <view class="fool-content u-skeleton-fillet">
          <view style="font-size: 35rpx;font-weight: 500;margin-bottom: 30rpx;color: #000;">食谱内容
            <text style="font-size: 26rpx;margin-left: 10rpx;color: #888;">共{{detail.cycle}}}天</text>
          </view>
          <u-tabs :list="tabsList" :current="current" @change="change" bg-color="#FFFFFF" :show-bar="false"
            active-color="#4FCFCE"></u-tabs>
          <view class="fool-food">
            <view class="breakfast-food">
              <view class="food-item">
                <image src="../../static/images/morfood.png" mode="widthFix"></image>
                <view class="food-text">
                  早餐
                </view>
              </view>
              <view v-if="breakfastList.length" class="mor-food" v-for="(item,index) in breakfastList" :key="index">
                <view class="mor-name">
                  {{item.name}}
                </view>
                <view class="mor-num">
                  {{item.weight}}
                </view>
              </view>
              <view v-if="breakfastList.length==0" class="noProject">
                早餐还未规划哦
              </view>
            </view>
            <view class="lunch-food">
              <view class="food-item">
                <image src="../../static/images/affood.png" mode="widthFix"></image>
                <view class="food-text">
                  午餐
                </view>
              </view>
              <view v-if="lunchList.length" class="mor-food" v-for="(item,index) in lunchList" :key="index">
                <view class="mor-name">
                  {{item.name}}
                </view>
                <view class="mor-num">
                  {{item.weight}}
                </view>
              </view>
              <view v-if="lunchList.length==0" class="noProject">
                午餐还未规划哦
              </view>
            </view>
            <view class="dinner-food">
              <view class="food-item">
                <image src="../../static/images/evfood.png" mode="widthFix"></image>
                <view class="food-text">
                  晚餐
                </view>
              </view>
              <view v-if="dinnerList.length" class="mor-food" v-for="(item,index) in dinnerList" :key="index">
                <view class="mor-name">
                  {{item.name}}
                </view>
                <view class="mor-num">
                  {{item.weight}}
                </view>
              </view>
              <view v-if="dinnerList.length==0" class="noProject">
                晚餐还未规划哦
              </view>
            </view>
          </view>
          <view class="fool-text">
            更多食谱内容使用食谱后为您制定
          </view>
        </view>
      </view>
      <view class="edit-food">
        <button class="edit-btn"
          @click="goto('/pages/food-edit/food-edit?day='+current+'&id='+diet_id+'&list='+JSON.stringify(this.list))">编辑</button>
      </view>
    </view>

    <u-skeleton :loading="loading" :animation="true" bgColor="#fefefe"></u-skeleton>
  </view>
</template>

<script>
  import {
    data
  } from 'uview-ui/libs/mixin/mixin';
  export default {
    data() {
      return {
        tabsList: [{
          name: '第1天'
        }, {
          name: '第2天'
        }, {
          name: '第3天'
        }, {
          name: '第4天'
        }, {
          name: '第5天'
        }, {
          name: '第6天'
        }, {
          name: '第7天'
        }],
        current: 0,
        breakfastList: [],
        lunchList: [],
        dinnerList: [],
        detail: {},
        diet_id: "",
        list: [],
        loading: true,
      };
    },
    onLoad(option) {
      console.log(option);
      this.diet_id = option.id
      this.getDetail()
      setTimeout(() => {
        this.loading = false;

        if (this.detail.cycle === 14) {
          this.tabsList = [{
            name: '第1天'
          }, {
            name: '第2天'
          }, {
            name: '第3天'
          }, {
            name: '第4天'
          }, {
            name: '第5天'
          }, {
            name: '第6天'
          }, {
            name: '第7天'
          }, {
            name: '第8天'
          }, {
            name: '第9天'
          }, {
            name: '第10天'
          }, {
            name: '第11天'
          }, {
            name: '第12天'
          }, {
            name: '第13天'
          }, {
            name: '第14天'
          }]
        }
      }, 1500)
    },
    onShow() {
      this.getDetail()
    },
    methods: {
      change(index) {
        this.current = index;
        this.getDetail()
      },
      async getDetail() {
        let res = await uniCloud.callFunction({
          name: "diet",
          data: {
            flag: 3,
            diet_id: this.diet_id,
            id: this.vuex_user.id
          }
        })
        console.log(res);
        if (res.result.data.length === 0) {
          let res1 = await uniCloud.callFunction({
            name: "diet",
            data: {
              flag: 1,
              _id: this.diet_id,
            }
          })
          this.detail = res1.result.data[0]
        } else {
          let res2 = await uniCloud.callFunction({
            name: "diet",
            data: {
              flag: 2,
              diet_id: this.diet_id,
              id: this.vuex_user.id
            }
          })
          this.detail = res2.result.data[0]
          console.log(this.detail, 'detail');
          if (this.detail.foodList) {
            this.list = this.detail.foodList.filter((item) => {
              return item.day == this.current;
            })
            console.log(this.list, 'list');
            this.breakfastList = this.list?.[0]?.breakfastList || []
            this.lunchList = this.list?.[0]?.lunchList || []
            this.dinnerList = this.list?.[0]?.dinnerList || []
            console.log('早餐列表:', this.breakfastList);
            console.log('午餐列表:', this.lunchList);
            console.log('晚餐列表:', this.dinnerList);
          }
        }
      },
      goto(url) {
        uni.navigateTo({
          url
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .fool {
    width: 100%;
    height: 100%;
    padding-bottom: 170rpx;
    background-color: #DFE3EF;

    .fool-img {
      image {
        width: 100%;
        height: 500rpx;
        margin: 0 auto;
        border-radius: 0 0 15% 15% / 0 0 5% 5%;
      }
    }

    .fool-detail {
      margin: 0 25rpx;

      .fool-target {
        position: absolute;
        top: 430rpx;
        width: 93%;
        height: 200rpx;
        padding: 0 160rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 255, 255, 0.9);
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          .number {
            font-weight: 700;
            font-size: 50rpx;
            color: #000;
          }

          .text {
            font-size: 25rpx;
            color: #888;
            letter-spacing: 2rpx;
          }
        }
      }

      .fool-info {
        margin-top: 250rpx;

        .fool-feature {
          background-color: rgba(255, 255, 255, 255);
          padding: 20rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 25rpx;

          .featrue-text {
            color: #707070;
            letter-spacing: 1rpx;
            text-indent: 2em;
            font-size: 36rpx;
            line-height: 1.7em;
          }

        }
      }

      .fool-content {
        margin: 50rpx 0;

        .fool-food {
          background-color: #FFFFFF;
          border-bottom-left-radius: 20rpx;
          border-bottom-right-radius: 20rpx;
          padding-bottom: 50rpx;

          .food-item {
            padding: 20rpx 30rpx;
            display: flex;
            justify-content: start;
            align-items: center;

            image {
              width: 50rpx;
            }

            .food-text {
              margin-left: 15rpx;
              font-size: 30rpx;
              font-weight: 600;
            }
          }

          .noProject {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #888;
            font-size: 30rpx;
          }

          .mor-food {
            margin: 0 30rpx;
            padding: 10rpx 0;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .mor-name {
              font-weight: 500;
              font-size: 28rpx;
              color: #000;
            }

            .mor-num {
              font-weight: 500;
              font-size: 28rpx;
              color: #888;
            }
          }
        }

        .fool-text {
          font-size: 26rpx;
          margin: 50rpx 0;
          color: #888;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .edit-food {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 170rpx;
      background-color: #FFFFFF;

      .edit-btn {
        background-color: #00BEC6;
        border-radius: 50rpx;
        color: #DBFFFF;
        margin: 20rpx;
      }
    }
  }
</style>